<template>
	<section>
		<search-bar></search-bar>
		<div class="title">3D创作学堂</div>
		<ul class="model-wrap">
			<li v-for="(item, index) in modelList" :key="item.id" class="model-list" @click="toDetail(item)">
				<div class="content">
					<img :src='staticURL+item.thumbnail_url' v-if='item.thumbnail_url' class='bg_logo'/>
					<img src='http://3d.letinsolo.com/uploads/018ecc6c-e5fb-7bea-b9eb-4b61378cd619.png' class='bg_logo' v-else/>
					
					<div class="content-bottom">
						<div class="user-info">
							<img :src="item.headimg" v-if='item.headimg'>
							<img src="@/assets/img/user-logo.png" v-else/>
							<span>{{item.realname}}</span>
						</div>
						
						<div class="tool-info">{{item?.create_time?.slice(0,10)}}</div>
					</div>
					
					<div class="content-middle">
						<p class="name">{{item.name}}</p>
					</div>
				</div>
			</li>
		</ul>
		<common-pagination v-if='total > 10' :total="total" :size="searchData.size" @size-change="handelPagesizeChange" @page-change="handlePageChange"></common-pagination>
		<guide-detail v-if="isShowDetail" :model_id="model_id" @close="close"></guide-detail>
	</section>
</template>

<script>
	import utils from '@/assets/js/utils';
	import CommonPagination from '@/components/CommonPagination';
	import ModelRender from './components/modelRender';
	import GuideDetail from './components/guideDetail';
	import SearchBar from '@/components/SearchBar';
	import {getCollect} from '@/api/personal.js';
	import {getModelDetail} from '@/api/model.js';
	export default {
		components: {
			CommonPagination,
			ModelRender,
			GuideDetail,
			SearchBar
		},
		data() {
			return {
				modelList:[],
				model_id:"",
				isShowDetail: false,
				searchData: {
					page: 1,
					size: 10
				},
				total: 0,
			};
		},

		created() {
			this.getCollectList();
		},

		methods: {
			async getCollectList() {
				const {data,status} = await getCollect(this.searchData);
				if (status !== 200) return;
				if(data.code == 200){
					this.modelList = data?.data?.list || [];
					this.total = data?.data?.total || 0;
				}
				else{
					this.modelList = [];
					this.total = 0
					this.$message.warning(data && data.message || '获取失败');
				}
				
			},

			handelPagesizeChange(size) {
				this.searchData.size = size;
				this.getCollectList();
			},

			handlePageChange(page) {
				this.searchData.page = page;
				this.getCollectList();
			},

			toDetail(item) {
				this.model_id = item.id;
				this.isShowDetail = true;
			},
			
			close() {
				this.isShowDetail = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.title{
		font-weight: bold;
		font-size: 18px;
		color: #000000;
		margin-bottom: 16px;
	}
	.model-wrap{
		display: flex;
		flex-wrap: wrap;
		.model-list{
			width: 20%;
			margin-bottom: 30px;
			.content{
				position: relative;
				width: 90%;
				height: 100%;
				.bg_logo{
					display: block;
					width: 100%;
					height: 180px;
					border-radius: 10px 10px 0px 0px;
				}
				.content-middle{
					z-index: 9;
					position: absolute;
					top:0;
					left: 0;
					right: 0;
					width: 100%;
					height: 180px;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					padding: 20px 26px;
					box-sizing: border-box;
					border-radius: 10px 10px 0px 0px;
					cursor: pointer;
					background: rgba(0, 0, 0, 0.6);
					color: #fff;
					.name{
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						font-weight: 400;
						font-size: 14px;
						color: #FFFFFF;
					}
				}
				.content-bottom{
					@include flex-row;
					justify-content: space-between;
					margin-top: 10px;
					.user-info{
						@include flex-row;
						img{
							display: block;
							width:24px;
							height: 24px;
							border-radius: 50%;
							margin-right: 4px
						}
						span{
							font-size: 14px;
							color: #999999;
						}
					}
					.tool-info{
						font-size: 14px;
						color: #999999;
					}
				}
			}
		}
	}
</style>
